<template>
  <div v-if="state.visible" class="ant-image-preview-root previewGroup">
    <div class="ant-image-preview-mask" />
    <div tabindex="-1" class="ant-image-preview-wrap" role="dialog">
      <div role="document" class="ant-image-preview">
        <div
          tabindex="0"
          aria-hidden="true"
          style="width: 0px; height: 0px; overflow: hidden"
        />
        <div class="ant-image-preview-content">
          <!----><!---->
          <div class="ant-image-preview-body">
            <ul class="ant-image-preview-operations">
              <li
                class="ant-image-preview-operations-operation"
                @click="onClose"
              >
                <a-icon
                  type="close"
                  class="ant-image-preview-operations-icon"
                />
              </li>
              <li
                class="ant-image-preview-operations-operation"
                @click="zoomIn"
              >
                <a-icon
                  type="zoom-in"
                  class="ant-image-preview-operations-icon"
                />
              </li>
              <li
                :class="{
                  'ant-image-preview-operations-operation-disabled':
                    state.zoomIndex === 1
                }"
                class="ant-image-preview-operations-operation"
                @click="zoomOut"
              >
                <a-icon
                  type="zoom-out"
                  class="ant-image-preview-operations-icon"
                />
              </li>
            </ul>
            <div
              v-if="isVideo(state.src)"
              class="ant-image-preview-img-wrapper"
              style="transform: translate3d(0px, 0px, 0px)"
            >
              <video controls width="100%" height="100%">
                <source :src="state.src" type="video/mp4" />
              </video>
            </div>
            <div
              class="ant-image-preview-img-wrapper"
              v-else
              style="transform: translate3d(0px, 0px, 0px)"
            >
              <img
                v-show="state.spinnig"
                style="width: 100px; height: 100px"
                class="ant-image-preview-img"
                :src="state.loadingImg"
              />
              <img
                v-show="!state.spinnig"
                :src="state.src"
                class="ant-image-preview-img"
                :style="{
                  transform: imgStyle
                }"
              />
            </div>
            <div
              class="ant-image-preview-switch-left"
              :class="{
                'ant-image-preview-switch-left-disabled':
                  state.activeIndex === 0
              }"
              @click="prev"
            >
              <a-icon type="left-circle" />
            </div>
            <div
              class="ant-image-preview-switch-right"
              :class="{
                'ant-image-preview-switch-right-disabled':
                  state.activeIndex === listSrc.length - 1
              }"
              @click="next"
            >
              <a-icon type="right-circle" />
            </div>
          </div>
          <!---->
        </div>
        <div
          tabindex="0"
          aria-hidden="true"
          style="width: 0px; height: 0px; overflow: hidden"
        />
      </div>
    </div>
  </div>
</template>
<script>
import loadingImg from '@/assets/images/loading.gif'
import errorImg from '@/assets/images/img-error.png'
import { isVideo } from '../../src/utils/utils'
export default {
  props: {
    close: {
      type: Function,
      default: () => {}
    },
    value: {
      type: Boolean,
      default: false
    },
    listSrc: {
      type: Array,
      default: () => []
    },
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isVideo,
      state: {
        zoomIndex: 1,
        rotate: 0,
        spinnig: false,
        src: '',
        loadingImg: `${loadingImg}`,
        visible: this.value,
        activeIndex: this.listSrc.findIndex(item => item === this.src)
      }
    }
  },
  computed: {
    imgStyle() {
      const { zoomIndex, rotate } = this.state
      return `scale3d(${zoomIndex}, ${zoomIndex}, 1) rotate(${rotate}deg)`
    }
  },
  watch: {
    value(val) {
      this.state.visible = val
    }
  },
  mounted() {
    this.setImgLink()
  },
  methods: {
    next() {
      if (this.state.activeIndex < this.listSrc.length - 1) {
        this.state.activeIndex++
        this.setImgLink()
      }
    },
    prev() {
      if (this.state.activeIndex > 0) {
        this.state.activeIndex--
        this.setImgLink()
      }
    },
    setImgLink() {
      this.state.spinnig = true
      this.loadImg()
    },
    loadImg() {
      // console.log(1,this.listSrc)
      // console.log(2,this.src)
      // console.log(3,this.listSrc.findIndex((item) => item === this.src))
      if (isVideo(this.listSrc[this.state.activeIndex])) {
        this.state.src = this.listSrc[this.state.activeIndex]
      } else {
        const img = new Image()
        img.onload = () => {
          this.state.src = this.listSrc[this.state.activeIndex]
          this.state.spinnig = false
        }
        img.onerror = () => {
          this.state.src = errorImg
          this.state.spinnig = false
        }
        img.src = this.listSrc[this.state.activeIndex]
      }
    },
    zoomIn() {
      this.state.zoomIndex++
    },
    zoomOut() {
      if (this.state.zoomIndex > 1) {
        this.state.zoomIndex--
      }
    },
    rotateRight() {
      this.state.rotate += 90
    },
    rotateLeft() {
      this.state.rotate -= 90
    },
    onClose() {
      if (this.close) {
        this.close()
      }
      this.$emit('input', false)
    }
  }
}
</script>
<style lang="less" scoped>
@zindex-preview-mask: 2000;
@text-color: #ffffffd9;
@text-color-disabled: #ffffff73;
.reset() {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box() {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.ant-image {
  &-preview {
    text-align: center;
    height: 100%;

    &-body {
      .box();
      overflow: hidden;
    }

    &.zoom-enter,
    &.zoom-appear {
      transform: none;
      opacity: 0;
      animation-duration: 0.3s;
    }

    &-mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-preview-mask;
      height: 100%;
      background-color: #00000073;
      filter: ~'alpha(opacity=50)';

      &-hidden {
        display: none;
      }
    }

    &-img {
      cursor: grab;
      transform: scale3d(1, 1, 1);
      transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
      user-select: none;
      vertical-align: middle;
      max-width: 100%;
      max-height: 100%;
      pointer-events: auto;
      &-wrapper {
        .box();
        transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
        &::before {
          content: '';
          display: inline-block;
          height: 50%;
          width: 1px;
          margin-right: -1px;
        }
      }
    }

    &-moving {
      .ant-image-preview-img {
        cursor: grabbing;
        &-wrapper {
          transition-duration: 0s;
        }
      }
    }

    &-wrap {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-preview-mask;
      overflow: auto;
      outline: 0;
      -webkit-overflow-scrolling: touch;
    }

    &-operations {
      .reset();
      pointer-events: auto;
      list-style: none;
      position: absolute;
      display: flex;
      top: 0;
      right: 0;
      width: 100%;
      align-items: center;
      flex-direction: row-reverse;
      z-index: 1;
      color: @text-color;
      background: #00000073;

      &-operation {
        padding: 10px;
        cursor: pointer;
        margin-left: 10px;
        &-disabled {
          pointer-events: none;
          color: @text-color-disabled;
        }
        &:last-of-type {
          margin-left: 0;
        }
      }
      &-icon {
        font-size: 18px;
      }
    }

    &-switch-left {
      position: absolute;
      left: 10px;
      top: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: auto;
      color: @text-color;
      &-disabled {
        background: rgba(0, 0, 0, 0.1);
        color: @text-color-disabled;
        cursor: not-allowed;
        > .anticon {
          cursor: not-allowed;
        }
      }
      > .anticon {
        font-size: 24px;
      }
    }

    &-switch-right {
      position: absolute;
      right: 10px;
      top: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      pointer-events: auto;
      color: @text-color;
      &-disabled {
        background: rgba(0, 0, 0, 0.1);
        color: @text-color-disabled;
        cursor: not-allowed;
        > .anticon {
          cursor: not-allowed;
        }
      }
      > .anticon {
        font-size: 24px;
      }
    }
  }
}
</style>
